﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="orderCreate-vue" style="margin-bottom:350px">
    <el-form :model="ruleForm" :rules="rules" label-width="200px" ref="ruleForm">
        <el-form-item label="订单编号" prop="OrderCode">
            <el-input v-model="ruleForm.OrderCode"></el-input>
        </el-form-item>
        <el-form-item label="物料编号" prop="MaterialId">
            <el-input v-model="ruleForm.MaterialId"></el-input>
        </el-form-item>
        <el-form-item label="物料名称" prop="MaterialName">
            <el-input v-model="ruleForm.MaterialName"></el-input>
        </el-form-item>
        <el-form-item label="计划投产数量" prop="MaterialQuantity">
            <el-input-number v-model="ruleForm.MaterialQuantity" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="计划生产数量" prop="PlaneQuantity">
            <el-input-number v-model="ruleForm.PlaneQuantity" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="计划批次数量" prop="BatchQuantity">
            <el-input-number v-model="ruleForm.BatchQuantity" :min="1" :max="100"></el-input-number>
        </el-form-item>
        <el-form-item label="优先级" prop="Priority">
            <el-select v-model="ruleForm.Priority" placeholder="请选择优先级">
                <el-option label="低" value="0"></el-option>
                <el-option label="普通" value="1"></el-option>
                <el-option label="紧急" value="2"></el-option>
                <el-option label="加急" value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="订单类型" prop="OrderType">
            <el-select v-model="ruleForm.OrderType" placeholder="请选择订单类型">
                <el-option label="未定义" value="0"></el-option>
                <el-option label="生产" value="1"></el-option>
                <el-option label="首批次" value="2"></el-option>
                <el-option label="试生产" value="3"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="计划开始日期" prop="PlaneDate">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.PlaneDate"></el-date-picker>
        </el-form-item>
        <el-form-item label="计划完成日期" prop="RequiredDate">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.RequiredDate"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" v-on:click="submitForm('ruleForm')">立即创建</el-button>
            <el-button v-on:click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</div>

<script>
    let app = new Vue({
        el: '#orderCreate-vue',
        data: {
            ruleForm: {
                OrderCode: '',
                MaterialId: '',
                MaterialName: '',
                MaterialQuantity: 0,
                PlaneQuantity: 0,
                BatchQuantity: 0,
                Priority: 1,
                Sequence: 0,
                PlaneDate: new Date(),
                RequiredDate: new Date(),
                Unit: '',
                OrderType: 0
            },
            rules: {
                OrderCode: [
                    { required: true, message: '请输入订单编号，长度不大于30个字符', trigger: 'blur' },
                    { min: 1, max: 30, message: '长度应在1~30个字符之间', trigger: 'blur' }
                ],
                MaterialId: [
                    { required: true, message: '请输入物料编号，长度不大于30个字符', trigger: 'blur' },
                    { min: 1, max: 30, message: '长度应在1~30个字符之间', trigger: 'blur' }
                ],
                MaterialName: [
                    { required: true, message: '请输入物料名称，长度不大于30个字符', trigger: 'blur' },
                    { min: 1, max: 30, message: '长度应在1~30个字符之间', trigger: 'blur' }
                ],
                MaterialQuantity: [
                    { type: 'number', required: true, message: '请输入计划投产数量', trigger: 'change' }
                ],
                PlaneQuantity: [
                    { type: 'number', required: true, message: '请输入计划生产数量', trigger: 'change' }
                ],
                BatchQuantity: [
                    { type: 'number', required: true, message: '请输入计划批次数量', trigger: 'change' }
                ],
                Priority: [
                    { required: true, message: '请选择优先级', trigger: 'change' }
                ],
                Sequence: [
                    { required: false }
                ],
                PlaneDate: [
                    { type: 'date', required: true, message: '请选择计划开始日期', trigger: 'change' }
                ],
                RequiredDate: [
                    { type: 'date', required: true, message: '请选择计划完成日期', trigger: 'change' }
                ],
                Unit: [
                    { required: false }
                ],
                OrderType: [
                    { required: true, message: '请选择订单类型', trigger: 'change' }
                ]
            }
        },
        methods: {
            submitForm(formName) {
                let url = '@Url.Content("~/OrderManage/OrderPreview/CreateOrder")'               
                axios.post(url, {
                    orderList: this.ruleForm
                }).then(res => {
                    if (res.data.Status=='success') {
                        this.$message({
                            message: '创建成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error('创建失败：'+res.data.Message);
                    }
                }).catch(err => {
                    this.$message.error('创建失败：' + err);
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })
</script>

